<template>
  <div class="login-container">
    <div class="register-content">
  
      <div class="register-box">
        <form class="register-form">
          <div class="form-group">
            <label for="username">用户名</label>
            <input
              id="username"
              v-model="username"
              type="text"
              placeholder="请输入用户名"
              class="form-input"
              @input="onUsernameInput"
              maxlength="20"
            />
            <span v-if="usernameError" class="error-message">{{ usernameError }}</span>
          </div>
          <div class="form-group">
            <label for="idNumber">身份证号</label>
            <input
              id="idNumber"
              v-model="idNumber"
              type="text"
              placeholder="请输入身份证号"
              class="form-input"
              @blur="validateIdNumber"
            />
            <span v-if="idNumberError" class="error-message">{{ idNumberError }}</span>
          </div>
          <div class="form-group">
            <label>性别</label>
            <van-radio-group v-model="gender" direction="horizontal">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
            </van-radio-group>
            <span v-if="genderError" class="error-message">{{ genderError }}</span>
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input
              id="password"
              v-model="password"
              type="password"
              placeholder="请输入密码"
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input
              id="confirmPassword"
              v-model="confirmPassword"
              type="password"
              placeholder="请确认密码"
              class="form-input"
            />
            <span v-if="passwordError" class="error-message">{{ passwordError }}</span>
          </div>
          <button
            class="register-btn"
            :disabled="!canRegister"
            @click.prevent="handleRegister"
          >
            注册
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { RadioGroup, Radio } from 'vant'

const username = ref('')
const idNumber = ref('')
const gender = ref('')
const password = ref('')
const confirmPassword = ref('')

const usernameError = ref('')
const idNumberError = ref('')
const genderError = ref('')

function onUsernameInput(e: Event) {
  // 只允许英文字母和数字，且不超过20个字符
  let val = (e.target as HTMLInputElement).value
  val = val.replace(/[^a-zA-Z0-9]/g, '')
  if (val.length > 20) val = val.slice(0, 20)
  username.value = val
  usernameError.value = ''
}

function validateIdNumber() {
  // 简单校验中国身份证号格式（15或18位，18位可带X/x）
  const id = idNumber.value
  const reg = /^(\d{15}|\d{17}[\dXx])$/
  if (!reg.test(id)) {
    idNumberError.value = '身份证号格式不正确'
    return false
  }
  idNumberError.value = ''
  return true
}

const passwordError = computed(() => {
  if (password.value && confirmPassword.value && password.value !== confirmPassword.value) {
    return '两次输入的密码不一致'
  }
  return ''
})

const canRegister = computed(() => {
  return (
    username.value &&
    !usernameError.value &&
    idNumber.value &&
    !idNumberError.value &&
    gender.value &&
    password.value &&
    confirmPassword.value &&
    password.value === confirmPassword.value
  )
})

function handleRegister() {
  if (!validateIdNumber()) return
  if (!gender.value) {
    genderError.value = '请选择性别'
    return
  } else {
    genderError.value = ''
  }
  // 注册逻辑
  alert(`注册成功！\n用户名：${username.value}\n身份证号：${idNumber.value}\n性别：${gender.value}`)
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  background: url('@/assets/images/your-medical-bg.jpg') no-repeat center center;
  background-size: cover;
  padding-top: 120px;
}

.register-content {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.register-header {
  text-align: center;
  margin-bottom: 28px;
  h1 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
  }
  h2 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #222;
    margin-bottom: 0;
  }
}

.register-box {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  padding: 40px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.register-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
}

label {
  color: #666;
  font-size: 28px;
  margin-bottom: 14px;
}

.form-input {
  width: 100%;
  padding: 28px 22px;
  border: 2.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 28px;
  color: #333;
  background: #f8f9fb;
  outline: none;
  margin-bottom: 0;
}
.form-input:focus {
  border: 2.5px solid #a48cff;
}

.error-message {
  color: #e74c3c;
  font-size: 22px;
  margin-top: 8px;
}

.register-btn {
  width: 100%;
  padding: 22px;
  background: #a48cff;
  color: #fff;
  font-size: 28px;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  margin-top: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.register-btn:disabled {
  background: #e0d7ff;
  cursor: not-allowed;
}

.gender-group,
:deep(.van-radio-group) {
  display: flex;
  gap: 32px;
  margin-top: 4px;
  align-items: center;
}
:deep(.van-radio) {
  font-size: 28px;
  color: #444;
  margin-right: 24px;
  --van-radio-size: 28px;
  --van-radio-label-font-size: 28px;
  --van-radio-label-color: #444;
  --van-radio-checked-icon-color: #a48cff;
}
:deep(.van-radio__icon) {
  font-size: 36px !important;
}
</style> 